<template>
  <div id="AgentNextContribute">
    <el-row>
      <mu-appbar title="今日代理贡献" style="background-color:#409EFF">
        <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'ContributeMenu' }"/>
      </mu-appbar>
    </el-row>

    <div class= "tools">
      <el-row>
        <el-col :xs="6" :sm="4" :md="3" :lg="3">
          玩家ID
        </el-col>
        <el-col :xs="18" :sm="20" :md="21" :lg="21">
          <el-input v-model="condition.uid" size="mini" @blur="getLowerContrybute"></el-input>
        </el-col>
      </el-row>
        <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <el-col :xs="6" :sm="6" :md="6" :lg="6">
            起始日期
          </el-col>
          <el-col :xs="18" :sm="18" :md="18" :lg="18">
            <el-date-picker
              v-model="condition.startDay"
              type="date"
              placeholder="选择起始日期"
              size="mini"
              @change="getUserContribute"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
        </el-col>

        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <el-col :xs="6" :sm="6" :md="6" :lg="6">
            结束日期
          </el-col>
          <el-col :xs="18" :sm="18" :md="18" :lg="18">
            <el-date-picker
              v-model="condition.endDay"
              type="date"
              placeholder="选择结束日期"
              size="mini"
              @change="getUserContribute"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
        </el-col> -->
    </div>


    <el-table
      :data="tableData"
      style="width: 100%"
      size="mini">
      <el-table-column
        prop="agentUid"
        label="代理ID">
      </el-table-column>
      <el-table-column
        prop="wechat"
        label="昵称">
      </el-table-column>
      <!-- <el-table-column
        prop="agentLevel"
        label="代理级别">
        <template slot-scope="scope">
          <span v-if="scope.row.agentLevel === 1">二级代理</span>
          <span v-if="scope.row.agentLevel === 2">一级代理</span>
          <span v-if="scope.row.agentLevel === 3">总代理</span>
          <span v-if="scope.row.agentLevel === 4">运营商</span>
          <span v-if="scope.row.agentLevel === 6">白户</span>
          <span v-if="scope.row.agentLevel === 5">官方</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="todayNdot"
        label="今日贡献">
      </el-table-column>
      <el-table-column
        prop="totalNdot"
        label="总计贡献">
      </el-table-column>
    </el-table>

    <el-row>
      <center>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="condition.total"
          :page-size="condition.pageSize"
          :current-page="condition.currentPage"
          @current-change="handleCurrentChange">
        </el-pagination>
      </center>
    </el-row>

  </div>
</template>

<script>
  export default {
    methods: {
      init () {
        this.getLowerContrybute()
      },
      getLowerContrybute () {
        let that = this
        if (this.condition.uid === '' || this.condition.uid.length === 0) {
          this.condition.uid = -1
        }
        this.$axios({
          method: 'get',
          url: '/api/AgentService.getLowerContrybute',
          params: this.condition
        })
        .then(function (resp) {
          that.condition.uid = ''
          if (resp.data.status === 'success') {
            that.tableData = resp.data.data
            that.condition.total = resp.data.page.total
          }
        })
      },
      handleCurrentChange (val) {
        this.condition.currentPage = val
        this.getLowerContrybute()
      }
    },
    data () {
      return {
        tableData: [],
        condition: {
          uid: '',
          currentPage: 1,
          pageSize: 10,
          total: 0,
          account: sessionStorage.getItem('account')
        }
      }
    },
    mounted () {
      this.init()
    }
  }
</script>

<style>
  #AgentNextContribute .el-row {
    margin-bottom: 16px;
  }
  #AgentNextContribute .el-col {
    margin-bottom: 8px;
  }
</style>
